<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios页面</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>

</head>

<body>
    <div>
        {{info}}
        <input type="submit" value="发出异步get请求" @click="f()">
        <input type="submit" value="发出异步post请求" @click="f1()">
    </div>
       <script>
           let v = new Vue({
               el:"body>div",
               data:{
                    info:"异步测试"
               },
               methods:{
                    f(){
                        // 发出异步get请求
                        // 参数是写在请求地址的后面通过?连接,多个参数通过&连接
                        axios.get("/helloAxios?name=tom&age=18").then(function (response){
                            // respons代表相应对象
                            alert(response.data)
                            // v.info = response.data;
                        })
                    },
                    f1(){
                        // 发出异步post请求,参数是写在请求体里面的
                        // post请求参数封装到JS对象里面
                        let data={name:"tom",age:18};
                        axios.post("postAxios",data).then(function (response){
                            // 把服务器的数据响应到页面当中
                            v.info = response.data;
                        })
                    }
               }
           })
      </script>
</body>

</html>